{% extends 'common/base.html' %}
{% block title %} Access Control Add {% endblock %}
{% block content %}

<style>
  th, td {
    vertical-align: middle;
    text-align: center;
  }
  .menu-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }
</style>

<!-- Container Fluid-->
<div class="container-fluid" id="container-wrapper">
  <div class="d-sm-flex align-items-center justify-content-between mb-2">
    <h1 class="h3 mb-0 text-gray-800 mt-2">
       Access Control Add
      <span style="margin-left:30px;float:right">
        <a href="/your/url" class="btn btn-info"> Access Control List</a>
      </span>
    </h1>
  </div>

  <div class="row">
    <div class="col-lg-12">
      <div class="card shadow">
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-bordered align-middle">
              <thead class="table-dark">
                <tr>
                  <th>Module</th>
                  <th>Module Menu</th>
                  <th>Create</th>
                  <th>Read</th>
                  <th>Update</th>
                  <th>Delete</th>
                </tr>
              </thead>
              <tbody>
                <!-- Module 1 -->
                <tr>
                  <td rowspan="5">Module-1</td>
                  <td class="text-start"><label class="menu-label"><input type="checkbox" class="menu-toggle"
                        data-menu="menu1">Menu-1</label></td>
                  <td><input type="checkbox" class="menu1"></td>
                  <td><input type="checkbox" class="menu1"></td>
                  <td><input type="checkbox" class="menu1"></td>
                  <td><input type="checkbox" class="menu1"></td>
                </tr>
                <tr>
                  <td class="text-start"><label class="menu-label"><input type="checkbox" class="menu-toggle"
                        data-menu="menu2">Menu-2</label></td>
                  <td><input type="checkbox" class="menu2"></td>
                  <td><input type="checkbox" class="menu2"></td>
                  <td><input type="checkbox" class="menu2"></td>
                  <td><input type="checkbox" class="menu2"></td>
                </tr>
                <tr>
                  <td class="text-start"><label class="menu-label"><input type="checkbox" class="menu-toggle"
                        data-menu="menu3">Menu-3</label></td>
                  <td><input type="checkbox" class="menu3"></td>
                  <td><input type="checkbox" class="menu3"></td>
                  <td><input type="checkbox" class="menu3"></td>
                  <td><input type="checkbox" class="menu3"></td>
                </tr>
                <tr>
                  <td class="text-start"><label class="menu-label"><input type="checkbox" class="menu-toggle"
                        data-menu="menu4">Menu-4</label></td>
                  <td><input type="checkbox" class="menu4"></td>
                  <td><input type="checkbox" class="menu4"></td>
                  <td><input type="checkbox" class="menu4"></td>
                  <td><input type="checkbox" class="menu4"></td>
                </tr>
                <tr>
                  <td class="text-start"><label class="menu-label"><input type="checkbox" class="menu-toggle"
                        data-menu="menu5">Menu-5</label></td>
                  <td><input type="checkbox" class="menu5"></td>
                  <td><input type="checkbox" class="menu5"></td>
                  <td><input type="checkbox" class="menu5"></td>
                  <td><input type="checkbox" class="menu5"></td>
                </tr>

                <!-- Module 2 -->
                <tr>
                  <td rowspan="2">Module-2</td>
                  <td class="text-start"><label class="menu-label"><input type="checkbox" class="menu-toggle"
                        data-menu="menu6">Menu-A</label></td>
                  <td><input type="checkbox" class="menu6"></td>
                  <td><input type="checkbox" class="menu6"></td>
                  <td><input type="checkbox" class="menu6"></td>
                  <td><input type="checkbox" class="menu6"></td>
                </tr>
                <tr>
                  <td class="text-start"><label class="menu-label"><input type="checkbox" class="menu-toggle"
                        data-menu="menu7">Menu-B</label></td>
                  <td><input type="checkbox" class="menu7"></td>
                  <td><input type="checkbox" class="menu7"></td>
                  <td><input type="checkbox" class="menu7"></td>
                  <td><input type="checkbox" class="menu7"></td>
                </tr>

                <!-- Module 3 -->
                <tr>
                  <td rowspan="3">Module-3</td>
                  <td class="text-start"><label class="menu-label"><input type="checkbox" class="menu-toggle"
                        data-menu="menu8">Menu-X</label></td>
                  <td><input type="checkbox" class="menu8"></td>
                  <td><input type="checkbox" class="menu8"></td>
                  <td><input type="checkbox" class="menu8"></td>
                  <td><input type="checkbox" class="menu8"></td>
                </tr>
                <tr>
                  <td class="text-start"><label class="menu-label"><input type="checkbox" class="menu-toggle"
                        data-menu="menu9">Menu-Y</label></td>
                  <td><input type="checkbox" class="menu9"></td>
                  <td><input type="checkbox" class="menu9"></td>
                  <td><input type="checkbox" class="menu9"></td>
                  <td><input type="checkbox" class="menu9"></td>
                </tr>
                <tr>
                  <td class="text-start"><label class="menu-label"><input type="checkbox" class="menu-toggle"
                        data-menu="menu10">Menu-Z</label></td>
                  <td><input type="checkbox" class="menu10"></td>
                  <td><input type="checkbox" class="menu10"></td>
                  <td><input type="checkbox" class="menu10"></td>
                  <td><input type="checkbox" class="menu10"></td>
                </tr>
 

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<script>
  // Toggle all permissions in the row when the menu checkbox is checked
  document.querySelectorAll('.menu-toggle').forEach(toggle => {
    toggle.addEventListener('change', function () {
      const menuClass = this.getAttribute('data-menu');
      const checkboxes = document.querySelectorAll(`.${menuClass}`);
      checkboxes.forEach(box => {
        box.checked = this.checked;
      });
    });
  });
</script>



{% endblock %}